<template>
  <div>
    <div class="title">正在上架的商品</div>
<!--    <h1 style="color: #000000">正在上架的商品</h1>-->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 2%">
      <el-form-item label="商品ID">
        <el-input v-model="queryParams.id" placeholder="商品ID" clearable />
      </el-form-item>
      <el-form-item label="卖方ID">
        <el-input v-model="queryParams.sellerId" placeholder="卖方ID" clearable />
      </el-form-item>
      <el-form-item label="上架日期">
        <el-date-picker
          v-model="queryParams.startTime"
          type="date"
          placeholder="上架日期"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Query</el-button>
      </el-form-item>
    </el-form>
    <el-main>
      <el-scrollbar>
        <el-table :data="tableData" stripe style="width: 100%; min-height: 480px">
          <el-table-column fixed type="index" label="序号" width="60px" />
          <el-table-column prop="name" label="商品名称"> 碳排放额度 </el-table-column>
          <el-table-column prop="residualAmount" label="余量" />
          <el-table-column prop="listingAmount" label="总量" />
          <el-table-column prop="listingPrice" label="标价" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
                >撤销
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
  </div>
  <div>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="totalPage"
      @change="doPageChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ListingInfoControllerService, type MassageQueryRequest } from '@/../generated'

const totalPage = ref(10)

const tableData = ref([
])

// 查询参数
const queryParams = ref<MassageQueryRequest>({
  current: 0,
  pageSize: 8,
  id:null,
  sellerId:'',
  startTime:''

})


/**
 * 查询请求
 */
const onSubmit = () => {}

/**
 * 加载数据
 */
const getDateList = async () => {
  const res = await ListingInfoControllerService.listMyListingInfoVoByPageUsingPost(queryParams.value)
  tableData.value = res.data.records
  totalPage.value = Math.floor(
    (Number(queryParams.value.pageSize - 1) + Number(res.data.total)) /
      Number(queryParams.value.pageSize)
  )
  console.log(res.data.records)
}
/**
 * 分页请求
 * @param page
 */
const doPageChange = (page: any) => {
  queryParams.value.current = page
  console.log("分页：",page)
  getDateList()
}

onMounted(() => {
  getDateList()
})

/**
 * 撤销碳配额商品
 * @param index
 * @param row
 */
const handleDelete= (index: any, row: any)=>{

  //1.撤销区块链上 暂存在中间人的碳配额

  //2.删除数据库信息

}
</script>

<style scoped>
.title {
  height: 40px;

  line-height: 40px;
  background-color: rgb(247, 226, 196);
  padding-left: 20px;
  margin-left: -1%;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
